<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{a}}</div>
        <div v-if="a==10">出现了</div>
        <button @click="a++">+1</button><br>
        <button @click="awesome = !awesome">切换</button>
        <h1 v-if="awesome">你中了100万！</h1><br><br>
        <button @click="add" :disabled="c >= 10">+</button>  
        <button @click="jian" :disabled="c <= 1">-</button>  
        <h2>{{ c }}</h2>  
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const {createApp,ref} =Vue
    createApp ({
        setup(){
            let a=ref(0)
            let c=ref(1)
            const awesome=ref(true)
            const add = () => {  
            if (c.value < 10) {  
                c.value++;  
            }  
        };  
        const jian = () => {  
            if (c.value > 1) {  
                c.value--;  
            }  
        }; 
            return{
                a,
                c,
                awesome,
                add,
                jian
            }
        }
    }).mount("#app")
</script>
</html>